<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
  </div>
  <template id="counter">
    <div>
      <h2>当前计数: {{num}}</h2>
      <button @click="decrement">-</button>
      <button @click="increment">+</button>
    </div>
  </template>
  <script>
    // 1. 注册组件
    Vue.component('counter', {
      template: "#counter",
      // 这里为什么要是一个函数?
      // 就是为了防止多次引用组件的时候, 组件和组件之间共用一个data, 造成变量泄露
      // Vue已经考虑了这个问题, 所以这里必须写函数, 利用函数的作用域, 成为一个闭包, 防止变量泄露
      data() {
        return {
          num: 0
        }
      },
      methods: {
        increment() {
          this.num++
        },
        decrement() {
          this.num--
        }
      }
    })

    const app = new Vue({
      el: "#app"
    })
  </script>
</body>

</html>